<template>
  <div class="main">
    <el-row :gutter="10" class="line-zero">
      <el-col :span="24">
        <div class="line-zero-img">
<!--          <el-image :src="webLogo"></el-image>-->
        </div>
        <div class="line-zero-search">
          <el-autocomplete
            placeholder="请输入内容"
            v-model="searchForm.searchWord"
            class="input-with-select"
            popper-class="el-find-add"
            :fetch-suggestions="querySearchAsync"
            @select="handleSelect">
            <el-select v-model="searchForm.db" slot="prepend" placeholder="资源库">
              <el-option label="全部" value=""></el-option>
              <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in dbList"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-autocomplete>
        </div>
      </el-col>
    </el-row>
    <!--    <el-row :gutter="10" class="line-one">-->
    <!--      <el-col :span="24">-->
    <!--        <div class="line-one-quickEntrance">-->
    <!--          <span>快捷入口:</span>-->
    <!--          <el-button v-for="item in entranceList" :value="item.nameEn" class="web-el-button" >{{item.nameZh}}</el-button>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-row :gutter="10" class="line-two">-->
    <!--      <el-col :span="24">-->
    <!--        <div class="line-two-left">-->

    <!--        </div>-->
    <!--        <div class="line-two-right">-->

    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    <el-row :gutter="10" class="line-three">-->
    <!--      <el-col :span="24"></el-col>-->
    <!--    </el-row>-->
    <!--    <el-row :gutter="10" class="line-four">-->
    <!--      <el-col :span="24"></el-col>-->
    <!--    </el-row>-->

  </div>
</template>

<script>
    import {searchCompletion} from "@/api/web/search";
    import * as KNOWLEDGEBASE from "@/api/web/knowledgeBase";
    import AESENCRY from "@/utils/crypto"
    import webLogo from "@/assets/logo/webLogo.png";

    export default {
        name: "index",
        data() {
            return {
                // src: 'https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/scholar_mid/static/protocol/https/xueshu/img/scholar_logo_e95073e.png',
                webLogo: webLogo,
                restaurants: [],
                entranceList: [],
                searchForm: {
                    searchWord: '',
                    db: '',
                    pageNumber: 1,
                    pageSizes: 10
                }
            }
        },
        props: {
            dbList: {
                type: Array,
                default: () => {
                    return null
                }
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
            this.getEntrance();
        },
        methods: {
            loadAll() {
                let querystore = JSON.parse(this.$cache.local.get("QUERYSTORE") || "[]");
                let queryList = [];
                queryList = querystore.map(item => {
                    return {
                        value: decodeURIComponent(item.q),
                    }
                });
                return queryList
            },
            querySearchAsync(queryString, cb) {
                if (this.searchForm.searchWord) {
                    const data = {
                        searchWord: this.searchForm.searchWord,
                        pageNumber: 1,
                        pageSizes: 10
                    };
                    searchCompletion(data).then(response => {
                        let list = response.data.list.map(item => {
                            return {
                                value: item.title
                            }
                        });
                        cb(list);
                    });
                } else {
                    let restaurants = this.restaurants;
                    cb(restaurants);
                }
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
                // const query = {
                //     db: this.searchForm.db,
                //     searchWord: item.value
                // };
                // this.$router.push({name: "/webList", query: query})
            },
            handleSearch() {
                this.$emit('addLocalSearchRecord', this.searchForm);
                const params = {
                    db: this.searchForm.db,
                    searchWord: this.searchForm.searchWord
                };
                this.$router.push({name: "/webList", params: params})
            },
            getEntrance() {
                KNOWLEDGEBASE.getEntrance().then(response => {
                    this.entranceList = response.data.list;
                });
            },
        }
    }
</script>
<style>
  .el-select .el-input {
    width: 100px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: rgba(255, 255, 255, 0.23);
  }

  .input-with-select {
    width: 100%;
  }

  .el-find-add {
    width: 100%;
  }

  .input-with-select .el-input__inner {
    height: 50px !important;
    font-size: 18px;
  }

  .web-el-button {
    height: 50px !important;
    width: 150px;
    margin: auto 10px;
  }
</style>
<style scoped>
  .main {
    /*height: 1250px;*/
  }

  .line-zero {
    min-height: 20%;
    border-radius: 4px;
  }

  .line-zero-img {
    width: 15%;
    height: 10%;
    margin: 40px auto;
  }

  .line-zero-search {
    width: 50%;
    margin: 20px auto;
  }


  .line-one {
    min-height: 10%;
    border-radius: 4px;
  }

  .line-one-quickEntrance span {
    margin: auto 0;
    font-weight: bolder;
    font-size: 18px;
    margin-right: 10px;
  }

  .line-one-quickEntrance {
    width: 70%;
    margin: 50px auto;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
  }

  .line-two {
    min-height: 40%;
    border-radius: 4px;
    border: red 1px solid;
  }

  .line-two-left {
    width: 45%;
    margin: 50px 5% 50px 10%;
    float: left;
    border: blue 1px solid;
  }

  .line-two-right {
    width: 25%;
    margin: 50px 10% 50px 5%;
    float: right;
    border: gold 1px solid;
  }

  .line-three {
    min-height: 30%;
  }

  /*.line-four {*/
  /*  min-height: 20%;*/
  /*}*/

</style>
